<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪</title>
    <link rel="stylesheet" href="index.css">
    <script src="../jquery-3.6.0.min.js"></script>

</head>

<body>
    <div class="sina">
        <form action="#">
            <div id="search">
                <span>新闻</span>
                <ul>
                    <li>新闻</li>
                    <li>微博</li>
                    <li>图片</li>
                    <li>视频</li>
                    <li class="more"><a href="http://search.sina.com.cn/?c=more">更多>></a></li>
                </ul>
            </div>
            <div class="query">
                <input type="text" name="query" class="query_input" placeholder="请输入搜索内容">
            </div>
            <div>
                <input type="submit" class="submit_btn" value="">
            </div>
        </form>
    </div>
    <script>
        $(function() {
            $("span").on("click", function() {
                $("ul").toggle();
            })
            $("#search>ul>li").hover(function() {
                $(this).addClass("active").siblings().removeClass("active");
            })

            $("#search>ul>li").not(".more").on("click", function() {
                let text = $(this).text();
                console.log(text);
                $(this).parent("ul").hide().prev("span").text(text);
            })
        })
    </script>
</body>

</html>